import React, { useState } from 'react';
import { Card, Button, Space, Tag, Input, Select, Tabs, Modal, Form, Radio, Row, Col, Avatar, Badge, Pagination } from 'antd';
import { PlusOutlined, SearchOutlined, SyncOutlined, EditOutlined, CheckOutlined, StopOutlined, UserOutlined } from '@ant-design/icons';
import './index.less';

const { Option } = Select;
const { TabPane } = Tabs;

const PatientPending: React.FC = () => {
  const [activeTab, setActiveTab] = useState('1');
  const [visible, setVisible] = useState(false);
  const [form] = Form.useForm();

  // 患者数据
  const data = [
    {
      key: '1',
      id: 'P2023050001',
      name: '张三',
      gender: '男',
      age: 45,
      idCard: '110101197508152211',
      phone: '13800138000',
      source: 'HIS系统',
      status: '待处理',
      createTime: '2023-05-10 08:30:45',
      avatar: null,
    },
    {
      key: '2',
      id: 'P2023050002',
      name: '李四',
      gender: '女',
      age: 32,
      idCard: '110101199104253625',
      phone: '13911112222',
      source: 'LIS系统',
      status: '待处理',
      createTime: '2023-05-10 09:15:22',
      avatar: null,
    },
    {
      key: '3',
      id: 'P2023050003',
      name: '王五',
      gender: '男',
      age: 28,
      idCard: '110101199510124578',
      phone: '13522223333',
      source: 'PACS系统',
      status: '需人工干预',
      createTime: '2023-05-10 10:45:13',
      avatar: null,
    },
    {
      key: '4',
      id: 'P2023050004',
      name: '赵六',
      gender: '女',
      age: 56,
      idCard: '110101196712154422',
      phone: '13366667777',
      source: 'EMR系统',
      status: '待处理',
      createTime: '2023-05-10 11:05:37',
      avatar: null,
    },
    {
      key: '5',
      id: 'P2023050005',
      name: '孙七',
      gender: '男',
      age: 41,
      idCard: '110101198203125896',
      phone: '13788889999',
      source: 'HIS系统',
      status: '已匹配',
      createTime: '2023-05-10 13:20:58',
      avatar: null,
    },
  ];

  // 状态对应的颜色
  const statusColorMap = {
    '待处理': 'orange',
    '已匹配': 'green',
    '拒绝匹配': 'red',
    '需人工干预': 'blue',
  };

  // 处理弹窗确认
  const handleOk = () => {
    form.validateFields().then(values => {
      console.log('Values:', values);
      setVisible(false);
      form.resetFields();
    }).catch(info => {
      console.log('Validate Failed:', info);
    });
  };

  // 关闭弹窗
  const handleCancel = () => {
    setVisible(false);
    form.resetFields();
  };

  // 展示待处理患者卡片
  const renderPatientCards = (patientList) => {
    return (
      <Row gutter={[16, 16]} className="patient-cards">
        {patientList.map(patient => (
          <Col xs={24} sm={12} md={8} lg={6} xl={6} key={patient.key}>
            <Card 
              className="patient-card"
              actions={[
                <Button type="link" onClick={() => setVisible(true)} icon={<EditOutlined />}>处理</Button>,
                <Button type="link" icon={<CheckOutlined />}>通过</Button>,
                <Button type="link" icon={<StopOutlined />}>拒绝</Button>
              ]}
            >
              <Badge.Ribbon text={patient.status} color={statusColorMap[patient.status]}>
                <div className="patient-card-content">
                  <div className="patient-avatar">
                    <Avatar 
                      size={64} 
                      icon={<UserOutlined />}
                      src={patient.avatar}
                    />
                  </div>
                  <div className="patient-info">
                    <div className="patient-name">
                      <span className="name">{patient.name}</span>
                      <span className="gender-age">{patient.gender} {patient.age}岁</span>
                    </div>
                    <div className="patient-id">流水号: {patient.id}</div>
                    <div className="patient-id-card">身份证: {patient.idCard.substring(0, 6)}********{patient.idCard.substring(14)}</div>
                    <div className="patient-phone">电话: {patient.phone.substring(0, 3)}****{patient.phone.substring(7)}</div>
                    <div className="patient-meta">
                      <div>来源: {patient.source}</div>
                      <div>创建: {patient.createTime.substring(0, 10)}</div>
                    </div>
                  </div>
                </div>
              </Badge.Ribbon>
            </Card>
          </Col>
        ))}
      </Row>
    );
  };

  return (
    <div className="patient-pending-container">
      <Card bordered={false} title="待处理患者">
        <Tabs activeKey={activeTab} onChange={setActiveTab}>
          <TabPane tab="待处理列表" key="1">
            <div className="table-top">
              <Space>
                <Select defaultValue="all" style={{ width: 120 }}>
                  <Option value="all">全部状态</Option>
                  <Option value="pending">待处理</Option>
                  <Option value="matched">已匹配</Option>
                  <Option value="rejected">拒绝匹配</Option>
                  <Option value="manual">需人工干预</Option>
                </Select>
                <Select defaultValue="all" style={{ width: 120 }}>
                  <Option value="all">全部来源</Option>
                  <Option value="his">HIS系统</Option>
                  <Option value="lis">LIS系统</Option>
                  <Option value="pacs">PACS系统</Option>
                  <Option value="emr">EMR系统</Option>
                </Select>
                <Button icon={<SyncOutlined />}>刷新</Button>
              </Space>
              <Input.Search
                placeholder="请输入姓名/身份证号/手机号"
                allowClear
                enterButton="搜索"
                style={{ width: 300 }}
              />
            </div>
            
            {renderPatientCards(data.filter(item => item.status !== '已匹配'))}
            
            <div className="pagination-container">
              <Pagination 
                defaultCurrent={1} 
                total={50} 
                showSizeChanger 
                showQuickJumper 
                showTotal={(total) => `共 ${total} 条`}
              />
            </div>
          </TabPane>
          <TabPane tab="处理历史" key="2">
            <div className="table-top">
              <Space>
                <Select defaultValue="all" style={{ width: 120 }}>
                  <Option value="all">全部状态</Option>
                  <Option value="matched">已匹配</Option>
                  <Option value="rejected">拒绝匹配</Option>
                </Select>
                <Select defaultValue="all" style={{ width: 120 }}>
                  <Option value="all">全部来源</Option>
                  <Option value="his">HIS系统</Option>
                  <Option value="lis">LIS系统</Option>
                  <Option value="pacs">PACS系统</Option>
                  <Option value="emr">EMR系统</Option>
                </Select>
              </Space>
              <Input.Search
                placeholder="请输入姓名/身份证号/手机号"
                allowClear
                enterButton="搜索"
                style={{ width: 300 }}
              />
            </div>
            
            {renderPatientCards(data.filter(item => item.status === '已匹配'))}
            
            <div className="pagination-container">
              <Pagination 
                defaultCurrent={1} 
                total={50} 
                showSizeChanger 
                showQuickJumper 
                showTotal={(total) => `共 ${total} 条`}
              />
            </div>
          </TabPane>
        </Tabs>
      </Card>

      <Modal
        title="患者匹配处理"
        visible={visible}
        onOk={handleOk}
        onCancel={handleCancel}
        width={800}
      >
        <div className="match-content">
          <div className="source-info">
            <h3>待匹配患者信息</h3>
            <div className="info-item">
              <span className="label">姓名：</span>
              <span className="value">张三</span>
            </div>
            <div className="info-item">
              <span className="label">性别：</span>
              <span className="value">男</span>
            </div>
            <div className="info-item">
              <span className="label">年龄：</span>
              <span className="value">45岁</span>
            </div>
            <div className="info-item">
              <span className="label">身份证号：</span>
              <span className="value">110101197508152211</span>
            </div>
            <div className="info-item">
              <span className="label">手机号：</span>
              <span className="value">13800138000</span>
            </div>
            <div className="info-item">
              <span className="label">来源系统：</span>
              <span className="value">HIS系统</span>
            </div>
          </div>

          <div className="match-candidates">
            <h3>可能匹配的患者</h3>
            <div className="candidates-list">
              <div className="candidate-item active">
                <div className="match-score">匹配度：95%</div>
                <div className="info-item">
                  <span className="label">主索引号：</span>
                  <span className="value">MPI20230001</span>
                </div>
                <div className="info-item">
                  <span className="label">姓名：</span>
                  <span className="value">张三</span>
                </div>
                <div className="info-item">
                  <span className="label">性别：</span>
                  <span className="value">男</span>
                </div>
                <div className="info-item">
                  <span className="label">身份证号：</span>
                  <span className="value">110101197508152211</span>
                </div>
              </div>
              <div className="candidate-item">
                <div className="match-score">匹配度：72%</div>
                <div className="info-item">
                  <span className="label">主索引号：</span>
                  <span className="value">MPI20230245</span>
                </div>
                <div className="info-item">
                  <span className="label">姓名：</span>
                  <span className="value">张三</span>
                </div>
                <div className="info-item">
                  <span className="label">性别：</span>
                  <span className="value">男</span>
                </div>
                <div className="info-item">
                  <span className="label">身份证号：</span>
                  <span className="value">110101197508154433</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <Form
          form={form}
          layout="vertical"
          name="match_form"
        >
          <Form.Item
            name="action"
            label="处理决定"
            rules={[{ required: true, message: '请选择处理决定' }]}
          >
            <Radio.Group>
              <Radio value="match">匹配到选中的患者</Radio>
              <Radio value="create">创建新患者主索引</Radio>
              <Radio value="reject">拒绝处理</Radio>
            </Radio.Group>
          </Form.Item>
          <Form.Item
            name="reason"
            label="处理原因"
          >
            <Input.TextArea rows={4} placeholder="请输入处理原因" />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
};

export default PatientPending; 
